<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="all">
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="downFn"
      v-model.trim="value"
    />
  </header>
</template>

<script>
import {mapGetters}from 'vuex'
export default {
  data(){return{list1:[],value:''}},
 computed:{
  ...mapGetters(['isAll']),
    list(){
      return this.$store.state.list
    },
    all:{
      set(val){
      const arr =  JSON.parse(JSON.stringify(this.list))
      arr.forEach(item=>item.isDone=val)
      this.$store.commit('updateList',arr)
      },
      get(){
        return this.isAll
      }
    }
  },
  methods:{
     downFn(){
     this.list1=JSON.parse(JSON.stringify(this.list))
    //  console.log(this.list1,this.value);
    this.list1.push({
      id:this.list1[this.list1.length-1]?this.list1[this.list1.length-1].id+1:100,
      name:this.value,
      isDone:false
    })
    // console.log(this.list1);
    this.$store.commit('updateList',this.list1)
    this.value=''
    }
  }
}
</script>
